<template>
  <div class="fruit-view">
    <BaseBox style="width: 75vw;margin:0 auto" ref="aBox">
      <template #title>
        <BaseTitle>主页</BaseTitle>
      </template>
      <template>
        <p>我是主页哦</p>
      </template>
    </BaseBox>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      info: "你好吗?",
    };
  },
  methods: {
  },
  // 最早的生命周期钩子
  // 无法获取数据 方法等Vue实例上的属性
  // 基本不用
  // Vue实例创建完毕之前执行
  beforeCreate() {
    // console.log("beforeCreate-执行啦");
    // console.log(this.info);
  },
  // Vue实例创建完毕之后执行
  // 可以获取到Vue实例的属性
  // 用的最多的，大部分的初始化操作(不涉及dom)的可以写在这里
  created() {
    // console.log("created-执行啦");
    // console.log(this.info);
  },
  // Vue实例化完毕，dom没有渲染出来之前执行
  // 无法获取dom元素，基本不用
  beforeMount() {
    // console.log("beforeMount-执行啦");
    // console.log(this.$refs.aP);
  },
  // Vue实例化完毕，dom渲染出来之后执行
  // 可以获取dom元素，使用频率还行
  // 依赖于dom元素的初始化逻辑（ECharts的初始化）
  mounted() {
    // console.log("mounted-执行啦");
    // console.log(this.$refs.aP);
  },
  // 数据更新，页面还没更新触发
  // 获取元素，及内容，拿不到更新之后的结果
  // 不用
  beforeUpdate() {
    // console.log("beforeUpdate-执行啦");
    // console.log(this.info);
    // console.log(this.$refs.aP.innerHTML);
  },
  // 数据更新，页面更新完毕触发
  // 获取元素，及内容，可以获取更新之后的结果
  // 基本不用
  updated() {
    // console.log("updated-执行啦");
    // console.log(this.info);
    // console.log(this.$refs.aP.innerHTML);
  },
  // 组件销毁之前 可以获取子组件
  // 数据可以获取
  // 很多写在 beforeDestroy的逻辑 也可以写在 destroyed
  // 除非涉及到子组件操纵
  // 做一些组件销毁需要释放的资源操作
  // 定时器销毁，websocket关闭连接
  beforeDestroy() {
    // console.log("beforeDestroy-执行啦");
    // console.log(this.$refs.aBox);
    // console.log(this.info);
  },
  // 组件销毁完毕之后 无法获取子组件
  // 数据可以获取
  destroyed() {
    // console.log("destroyed-执行啦");
    // console.log(this.$refs.aBox);
    // console.log(this.info);
  },
  // 上面的钩子 不考虑 缓存组件
  // 面试问道钩子，
  // 反问，你问的是包括缓存组件的还是不包括缓存组件的
  activated() {},
  deactivated() {},
};
</script>

<style lang="less" scoped>
.fruit-view {
  .list-wrap {
    display: flex;
    flex-wrap: wrap;
    .item {
      height: 110px;
      width: 100px;
      margin-bottom: 40px;
      margin-right: 30px;
      cursor: pointer;
      img {
        display: block;
        border: 2px solid yellowgreen;
        border-top-left-radius: 20px;
        border-bottom-right-radius: 20px;
        width: 100%;
        transition: 0.5s;
        &:hover {
          border-radius: 0;
          border-top-right-radius: 20px;
          border-bottom-left-radius: 20px;
        }
      }
      p {
        text-align: center;
        font-size: 13px;
      }
      &:hover {
        p {
          color: red;
        }
      }
    }
  }
}
</style>
